<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>google map</title>
  <style>
    html,body{
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      font-size:0;
      line-height: 0;
    }
    #map {
      height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
<!-- <h3>My Google Maps Demo</h3> -->
<div id="map"></div>
<script>
   function getParams(name, search) {
    search = (search || window.location.search).match(/\?.*(?=\b|#)/);

    if (!search) {
      return name ? '' : {};
    }

    search = search[0].replace(/^\?/, '');

    var queries = {};
    var params = search.split('&');

    for(var i = 0; i < params.length; i++) {
      var param = params[i];
      param = param.split('=');
      queries[param[0]] = param[1] ? decodeURIComponent(param[1]) : '';
    }

    return name ? queries[name] : queries;
  }
  function initMap() {
//    var uluru = {lat: 31.251500, lng: 121.507320};
//    var uluru = {lat: -6.175403, lng: 106.827114};
//    var uluru = {lat: -6.219020, lng: 106.804546};
    var uluru = {lat: +getParams('lat'), lng: +getParams('lng')};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
//  console.log(window.location);
//  console.log(window.location.href);
</script>
<!--<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD77oMQkURe0wKnYX7kLNtpdsNXCmU-hMw&callback=initMap"></script>-->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDlp6jnJQTS9y2h2WywUw4KhVvfrD3Gdds&callback=initMap"></script>
</body>
</html>
